import { Link, history } from 'umi';
import { msGridColRow } from '../utils';
import styles from './index.less';
import classNames from 'classnames';
import { CLASS_TYPE_MAP } from '@/common/const';
import { allGet } from '@/services/pc';
import { isYsClass } from '@/utils';

interface CourseItemProps {
  index?: number;
  id?: string;
  classid?: string;
  href?: string;
  open?: boolean;
}
export const CourseItem: React.FC<CourseItemProps> = ({
  index,
  href = '',
  open = false,
  ...props
}) => {
  /**
   * 3 录像
   * 5 实体书教学
   * 6 直播+ 录播
   * 7 远程免费视频
   */
  const to = href || `/center/courses/detail/${props.classid}`;
  const anyProps = props as any;
  const linkContent = (
    <div className="cgjoy--course-item-ratio">
      <div className="cgjoy--course-item-content">
        <img
          loading="lazy"
          className="cgjoy--course-item-img"
          src={anyProps?.pic}
          alt={anyProps?.name}
        />
        {/* {(isYsClass(anyProps) || anyProps.type == 6) && (
          <span className={classNames(styles.tag, { [styles.green]: isYsClass(anyProps) })}>
            {isYsClass(anyProps) ? '预售课' : CLASS_TYPE_MAP[anyProps.type] || ''}
          </span>
        )}
        <i className="cgjoy--course-item-mask" />
        {anyProps?.fqipay_text && (
          <span className="cgjoy--course-item-mx">{anyProps?.fqipay_text}</span>
        )}
        {anyProps?.enrollnum > 0 && (
          <span className="cgjoy--course-item-personnum">{anyProps?.enrollnum}人报名</span>
        )} */}
      </div>
    </div>
  );

  const tags = (
    <div className={styles.tags}>
      {anyProps?.fqipay_text && (
        <span className={classNames(styles.tag, styles.fq)} title={anyProps?.fqipay_text}>
          {anyProps?.fqipay_text}
        </span>
      )}
      {isYsClass(anyProps) || anyProps.type == 6 ? (
        <span
          className={classNames(styles.tag, styles.zhibo, { [styles.green]: isYsClass(anyProps) })}
        >
          {isYsClass(anyProps) ? '预售课' : CLASS_TYPE_MAP[anyProps.type] || ''}
        </span>
      ) : (
        <span className={classNames(styles.tag, styles.normal)}>即到即学</span>
      )}
    </div>
  );
  return (
    <div className={classNames(styles['cgjoy--course-item'], 'cgjoy--course-item')}>
      <div className={classNames(styles['cgjoy--course-item-wrapper'])}>
        <Link to={to} target={open ? '_blank' : ''}>
          {linkContent}
          {anyProps?.secskill > 0 && (
            <img
              className={classNames(styles['cgjoy--course-item-miao'])}
              src={require('@/assets/pc/images/index/miao.png')}
              alt=""
            />
          )}
          <div className="cgjoy--course-item-price">
            <span className="cgjoy--course-item-price_unit">¥</span>
            <span className="cgjoy--course-item-price_text">{anyProps?.price}</span>
          </div>
          <div className="cgjoy--course-item-title" title={anyProps?.name}>
            <span className="cgjoy--course-item-title_text">{anyProps?.name}</span>
          </div>
          {tags}
        </Link>
        <div className={styles.teacher}>
          <div
            className={styles.left}
            onClick={() => history.push(`/teachers/detail/${anyProps.uid}`)}
          >
            <img className={styles.avatar} src={anyProps?.avatar} alt="" loading="lazy" />
            <span className={styles.name}>{anyProps?.username}</span>
          </div>
          <div className={styles.num}>{anyProps?.viewnum}人想学</div>
        </div>
      </div>
    </div>
  );
};

// 样式不一样的，我的喜欢课程里面的，长一点的课程

interface CourseItemLongProps {
  onClick?: () => void;
  onBuy?: (data) => void;
  onDelete?: (data) => void;
}

export const CourseItemLong: React.FC<CourseItemLongProps> = (props) => {
  const anyProps = props as any;
  const disabled = parseInt(anyProps.state) < 0;
  const handleClick = () => {
    if (disabled) return;
    anyProps?.onClick?.();
  };
  const handleBuy = (item) => {
    if (disabled) return;
    anyProps?.onBuy?.(item);
  };
  const handleDelete = async () => {
    await allGet({
      params: { mod: 'course', do: 'learn', classid: anyProps.classid, version: 'pc1.0' },
    });
    anyProps?.onDelete?.();
  };

  return (
    <div
      className={classNames(styles.courseItemLong, 'cgjoy--course-item_long', {
        [styles.disabled]: disabled,
      })}
    >
      <div className={styles.imgWrapper}>
        <div
          onClick={handleClick}
          className={styles.img}
          style={{ backgroundImage: `url(${anyProps.pic})` }}
        />
        {/* 课程类型tag */}
        {(isYsClass(anyProps) || anyProps.type == 6) && (
          <span className={classNames(styles.tag, styles.ys, { [styles.zb]: isYsClass(anyProps) })}>
            {isYsClass(anyProps) ? '预售课' : CLASS_TYPE_MAP[anyProps.type]}
          </span>
        )}
        {/* 下架的商品遮罩 */}
        {disabled && (
          <div className={styles.over}>
            <div className={styles.mask} />
            <div className={styles.overmain}>已下架</div>
          </div>
        )}
      </div>

      <div className={styles.content}>
        <div className={styles.title}>{anyProps.name}</div>
        <div className={styles.info}>
          {anyProps?.fqipay_txt ? `${anyProps?.fqipay_txt} · ` : ''}
          {anyProps.enrollnum}人报名
        </div>
        <div className={styles.money}>
          <div className={styles.unit}>¥</div>
          <div className={styles.text}>{anyProps.price}</div>
          {anyProps.payed === false && (
            <div
              className={classNames(styles.button, { [styles.disabled]: disabled })}
              onClick={() => handleBuy(anyProps)}
            >
              立即购买
            </div>
          )}
        </div>
      </div>
      <img
        onClick={handleDelete}
        className={styles.delete}
        src={require('@/assets/pc/images/index/icon-delete.png')}
        alt=""
      />
    </div>
  );
};

interface CourseProps {
  data: Omit<CourseItemProps, 'columns'>[];
  itemKey: string;
  columns?: number;
  open?: boolean;
}

const Course: React.FC<CourseProps> = ({ data, itemKey, columns = 5, open }) => {
  return (
    <div className={classNames('cgjoy--course', styles['cgjoy--course'])}>
      {data.map((item, index) => (
        <CourseItem open={open} key={item[itemKey]} index={index} {...item} />
      ))}
    </div>
  );
};
export default Course;
